<template>
  <div class="panel loveList">
    <div class="tit">
      <span class="left">最近搜索</span>
      <span class="right" @click="emptyRecently" v-show="recentlyList.length">
        <i class="icon icon-close-outline"></i>
        清 空
      </span>
    </div>
    <ul>
      <li @click="setLabel(item)" v-for="item in recentlyList">{{item}}</li>
    </ul>
    <div class="panel-loading" v-show="!recentlyList.length && listGetting">
      <loading></loading>
    </div>
    <div class="panel-empty" v-show="!recentlyList.length && !listGetting">
      暂无搜索记录
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import server from '@/api/server/index';
  import { Toast } from 'mint-ui';
  import loading from '@/components/loading/loading';
  export default {
    computed: {
      ...mapGetters([
        'recentlyList'
      ])
    },
    name: '',
    data() {
      return {
        listGetting: false, //当前是否是获取状态
      }
    },
    activated (){
      setTimeout(()=>{
        this. __getSearchRecently();
      },20);
    },
    methods: {
      ...mapActions([
        'setRecentlyList'
      ]),
      setLabel(v) {
        this.$parent.setLabel(v);
      },
      emptyRecently() {
        this.setRecentlyList({
          type: 3
        });
      },
      addRecently(val){
        this.setRecentlyList({
          val:val,
          type: 2
        });
      },
      __getSearchRecently() {
        if(this.animationRotate) return;
        this.listGetting = true;
        this.setRecentlyList({type:1}).then(()=>{
          this.listGetting = false;
        }).catch((ms) => {
          this.listGetting = false;
        });
      }
    },
    components: {
      loading
    }
  }
</script>

<style lang="less">

</style>
